<!DOCTYPE html>
<html>
    <head>
        <!-- 页面meta -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>健康医疗</title>
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <!-- 引入样式 -->
        <link rel="stylesheet" href="../css/style.css">
        <link rel="stylesheet" href="../element-ui/index.css">
        <link rel="stylesheet" href="../css/font-awesome/css/font-awesome.min.css">
        <style>
            .grid-content {
                border-radius: 4px;
                min-height: 40px;
            }

            .echarts-count {
                display: inline-block;
                width: 630px;
                height: 400px;
                margin-top: 15px;
            }
        </style>
    </head>
    <body class="hold-transition">
        <div id="app">
            <div class="content-header">
                <h1>我的主页</h1>
            </div>
            <div class="app-container">
                <div class="box">
                    <el-row>
                        <el-col :span="12" align="center">
                            <el-date-picker
                                    v-model="member_date"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    format="yyyy 年 MM 月 dd 日"
                                    value-format="yyyy-MM-dd"
                                    :picker-options="pickerOptions"
                                    @change="findMemberCount">
                            </el-date-picker>
                        </el-col>
                        <el-col :span="12" align="center">
                            <el-date-picker
                                    v-model="setmeal_date"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    format="yyyy 年 MM 月 dd 日"
                                    value-format="yyyy-MM-dd"
                                    :picker-options="pickerOptions"
                                    @change="findSetmealCount">
                            </el-date-picker>
                        </el-col>
                    </el-row>

                    <div id="member" class="echarts-count" v-loading="memberData_loading"></div>
                    <div id="setmeal" class="echarts-count" v-loading="setmealData_loading"></div>

                    <table v-loading="memberReport_loading" class="exceTable" cellspacing="0" cellpadding="0">
                        <tr>
                            <td colspan="4" class="headBody">会员数据报告</td>
                        </tr>
                        <tr>
                            <td width='20%' class="tabletrBg">今日新增会员数</td>
                            <td width='30%'>{{memberReport.today}}</td>
                            <td width='20%' class="tabletrBg">总会员数</td>
                            <td width='30%'>{{memberReport.total}}</td>
                        </tr>
                        <tr>
                            <td class="tabletrBg">本周新增会员数</td>
                            <td>{{memberReport.thisWeek}}</td>
                            <td class="tabletrBg">本月新增会员数</td>
                            <td>{{memberReport.thisMonth}}</td>
                        </tr>
                    </table>
                    <table v-loading="orderReport_loading" class="exceTable" cellspacing="0" cellpadding="0">
                        <tr>
                            <td colspan="4" class="headBody">预约到诊数据报告</td>
                        </tr>
                        <tr>
                            <td width='20%' class="tabletrBg">今日预约数</td>
                            <td width='30%'>{{orderReport.todayOrder}}</td>
                            <td width='20%' class="tabletrBg">今日到诊数</td>
                            <td width='30%'>{{orderReport.todayVisit}}</td>
                        </tr>
                        <tr>
                            <td class="tabletrBg">本周预约数</td>
                            <td>{{orderReport.weekOrder}}</td>
                            <td class="tabletrBg">本周到诊数</td>
                            <td>{{orderReport.weekVisit}}</td>
                        </tr>
                        <tr>
                            <td class="tabletrBg">本月预约数</td>
                            <td>{{orderReport.monthOrder}}</td>
                            <td class="tabletrBg">本月到诊数</td>
                            <td>{{orderReport.monthVisit}}</td>
                        </tr>
                    </table>
                    <table v-loading="setmealReport_loading" class="exceTable" cellspacing="0" cellpadding="0">
                        <tr>
                            <td colspan="4" class="headBody">热门套餐数据报告</td>
                        </tr>
                        <tr class="tabletrBg textCenter">
                            <td width='20%'>套餐名称</td>
                            <td width='30%'>预约数量</td>
                            <td width='20%'>占比</td>
                            <td width='30%'>备注</td>
                        </tr>
                        <tr v-for="s in setmealReport">
                            <td>{{s.name}}</td>
                            <td>{{s.count}}</td>
                            <td>{{s.percent+"%"}}</td>
                            <td>{{s.remark}}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

        <!-- 引入js -->
        <script src="../js/echarts.min.js"></script>
        <script src="../js/axios.min.js"></script>
        <script src="../js/vue.js"></script>
        <script src="../element-ui/index.js"></script>
        <script>
            var vue = new Vue({
                el: '#app',
                data: {
                    member_date: [], //会员统计日期
                    setmeal_date: [], //套餐统计日期
                    memberData: {}, //会员数量统计数据
                    memberData_subtext: '', //会员数量统计副标题
                    memberData_loading: false, //会员数量统计遮罩
                    setmealData: {}, //套餐占比统计数据
                    setmealData_subtext: '', //套餐占比统计副标题
                    setmealData_loading: false, //套餐占比统计遮罩
                    memberReport: {}, //会员数据报告
                    memberReport_loading: false, //会员数据报告遮罩
                    orderReport: {}, //预约数据报告
                    orderReport_loading: false, //预约数据报告遮罩
                    setmealReport: [], //套餐数据报告
                    setmealReport_loading: false, //套餐数据报告遮罩
                    pickerOptions: { //日期快捷选项
                        shortcuts: [{
                            text: '最近一周',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', [start, end]);
                            }
                        }, {
                            text: '最近一个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                picker.$emit('pick', [start, end]);
                            }
                        }, {
                            text: '最近三个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                picker.$emit('pick', [start, end]);
                            }
                        }]
                    }
                },
                mounted() {
                    //初始化时间
                    this.initDate();
                    //会员数量统计
                    this.findMemberCount();
                    //套餐占比统计
                    this.findSetmealCount();
                    //会员数据报告
                    this.findMemberReport();
                    //预约到诊数据报告
                    this.findOrderReport();
                    //热门套餐数据报告
                    this.findSetMealReport();
                },
                methods: {
                    //返回yyyy-MM-dd格式字符串
                    format(date) {
                        var year = date.getFullYear();
                        var month = date.getMonth() + 1;
                        var day = date.getDate();
                        return year + "-" + month + "-" + day;
                    },
                    //初始化时间，默认最近一周
                    initDate() {
                        var end = this.format(new Date());

                        var millis = new Date().getTime() - 1000 * 3600 * 24 * 7;
                        var start = this.format(new Date(millis));

                        this.member_date = [start, end];
                        this.setmeal_date = [start, end];
                    },
                    //加载会员数量统计数据
                    findMemberCount() {
                        //打开遮罩
                        this.memberData_loading = true;

                        var url = "../home/findMemberCount";
                        var param = {
                            start: this.member_date[0],
                            end: this.member_date[1]
                        };
                        axios.get(url, {params: param})
                            .then(res => {
                                if (res.data.flag) {
                                    //日期列表
                                    this.memberData.stringList = res.data.data.stringList;
                                    //会员数量列表
                                    this.memberData.countList = res.data.data.countList;

                                    //显示图表
                                    this.showMemberChart();
                                } else {
                                    this.$message.warning(res.data.msg);
                                }

                                //关闭遮罩
                                this.memberData_loading = false;
                            })
                            .catch(error => {
                                this.$message.error("请求出错：" + error);
                                //关闭遮罩
                                this.memberData_loading = false;
                            });
                    },
                    //加载套餐占比统计数据
                    findSetmealCount() {
                        //打开遮罩
                        this.setmealData_loading = true;

                        var url = "../home/findSetMealCount";
                        var param = {
                            start: this.setmeal_date[0],
                            end: this.setmeal_date[1]
                        };
                        axios.get(url, {params: param})
                            .then(res => {
                                if (res.data.flag) {
                                    //套餐数据
                                    this.setmealData = res.data.data;

                                    //显示图表
                                    this.showSetMealChart();
                                } else {
                                    this.$message.warning(res.data.msg);
                                }

                                //关闭遮罩
                                this.setmealData_loading = false;
                            })
                            .catch(error => {
                                this.$message.error("请求出错：" + error);
                                //关闭遮罩
                                this.setmealData_loading = false;
                            });
                    },
                    //显示会员统计折线图
                    showMemberChart() {
                        //副标题
                        this.memberData_subtext = this.member_date[0] + " 至 " + this.member_date[1];
                        // 基于准备好的dom，初始化echarts实例
                        var myChart = echarts.init(document.getElementById('member'));

                        // 指定图表的配置项和数据
                        var option = {
                            title: {
                                text: '会员数量统计',
                                subtext: this.memberData_subtext,
                                left: 'center'
                            },
                            yAxis: {
                                type: 'value'
                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    saveAsImage: {show: true}
                                }
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: '会员数量：{c}<br/>日期：{b}'
                            },
                            xAxis: {
                                type: 'category',
                                data: this.memberData.stringList
                            },
                            series: [{
                                data: this.memberData.countList,
                                type: 'line'
                            }]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    },
                    //显示套餐占比统计饼图
                    showSetMealChart() {
                        //副标题
                        this.setmealData_subtext = this.setmeal_date[0] + " 至 " + this.setmeal_date[1];
                        var chartDom = document.getElementById('setmeal');
                        var myChart = echarts.init(chartDom);
                        var option;

                        option = {
                            title: {
                                text: '套餐占比统计',
                                subtext: this.setmealData_subtext,
                                left: 'center'
                            },
                            legend: {
                                top: 'bottom'
                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    saveAsImage: {show: true}
                                }
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: '{b} <br/>预约人数: {c} ({d}%)'
                            },
                            series: [
                                {
                                    type: 'pie',
                                    radius: [20, 140],
                                    roseType: 'area',
                                    itemStyle: {
                                        borderRadius: 8
                                    },
                                    data: this.setmealData
                                }
                            ]
                        };
                        option && myChart.setOption(option);
                    },
                    //会员数据报告
                    findMemberReport() {
                        //打开遮罩
                        this.memberReport_loading = true;

                        axios.get("../home/findMemberReport")
                            .then(res => {
                                if (res.data.flag) {
                                    //会员数据报告
                                    this.memberReport = res.data.data;
                                } else {
                                    this.$message.warning(res.data.msg);
                                }

                                //关闭遮罩
                                this.memberReport_loading = false;
                            })
                            .catch(error => {
                                this.$message.error("请求出错：" + error);
                                //关闭遮罩
                                this.memberReport_loading = false;
                            });
                    },
                    //预约到诊数据报告
                    findOrderReport() {
                        //打开遮罩
                        this.orderReport_loading = true;

                        axios.get("../home/findOrderReport")
                            .then(res => {
                                if (res.data.flag) {
                                    //预约到诊数据报告
                                    this.orderReport = res.data.data;
                                } else {
                                    this.$message.warning(res.data.msg);
                                }

                                //关闭遮罩
                                this.orderReport_loading = false;
                            })
                            .catch(error => {
                                this.$message.error("请求出错：" + error);
                                //关闭遮罩
                                this.orderReport_loading = false;
                            });
                    },
                    //热门套餐数据报告
                    findSetMealReport() {
                        //打开遮罩
                        this.setmealReport_loading = true;

                        axios.get("../home/findSetMealReport")
                            .then(res => {
                                if (res.data.flag) {
                                    //热门套餐数据报告
                                    this.setmealReport = res.data.data;
                                } else {
                                    this.$message.warning(res.data.msg);
                                }

                                //关闭遮罩
                                this.setmealReport_loading = false;
                            })
                            .catch(error => {
                                this.$message.error("请求出错：" + error);
                                //关闭遮罩
                                this.setmealReport_loading = false;
                            });
                    }
                }
            })
        </script>
    </body>
</html>